<template>
  <section class="log-actualtime-index-container">
    <!-- <base-header
      v-bind="headers"
    /> -->

    <div class="function-box">
      <div class="jee-hover-color jee-hover-fill" :class="{ 'jee-color': lock }" @click="handleLock">
        <i class="iconfont icon-a-Secretmanagement1"></i>
        <span>锁屏</span>
      </div>
      <div class="jee-hover-color" @click="realTimeList = []">
        <i iconClass="delete" class='iconfont icon-delete'></i>
        <span>清屏</span>
      </div>
      <div class="jee-hover-color" :class="{ 'jee-color': refresh }" @click="handleReflush">
        <i class="iconfont icon-refresh"></i>
        <span>自动刷新</span>
      </div>
    </div>
    <section class="roll-box scrollbar" id="roll-box" @scroll="onscroll">
      <div class="scoll-box">
        <p v-for="(item, index) in realTimeList" :key="index">
          <!-- <transition :key="index" name="fade" mode="out-in" > -->
          <span>{{ index + 1 }}</span>{{ item }}
          <!-- </transition> -->
        </p>
      </div>
    </section>
    <div class="mergeList" v-if='lock && refresh' @click="handleNewRow">有<span>{{ newRows }}</span>行新日志</div>
  </section>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, onBeforeUnmount } from "vue";
import request from "@/api/index";
// TS
interface dataSourceType {
  [propName: string]: any;
}
// data
const realTimeList = ref<dataSourceType[]>([]);
const lastTimeFileSize = ref<any>('');
const lock = ref<Boolean>(false); // 是否锁屏
const newRows = ref<number>(0); //第几行
const refresh = ref<Boolean>(true);
const Timer = ref<any>(null);
//methods
// 请求数据
const fetchLogsRealTime = () => {
  let OLdlastTimeFileSize = {
    size: lastTimeFileSize.value || 0
  }
  request.fetchStatisticsRealTimeList(OLdlastTimeFileSize).then((res: dataSourceType) => {
    lastTimeFileSize.value = res.lastTimeFileSize
    realTimeList.value = realTimeList.value.concat(res.contents);
    if (realTimeList.value.length > 100) {
      realTimeList.value.splice(0, realTimeList.value.length - 100);
    }
    if (lock.value) {
      newRows.value += res.contents.length
    } else {
      nextTick(() => {
        scrollToBottom()
      })
    }

  })
};
const handleLock = () => { // 点击锁定
  lock.value = !lock.value
  if (!lock.value) {
    scrollToBottom();
  }
};

const handleReflush = () => {// 点击自动刷新
  refresh.value = !refresh.value;
  if (refresh.value) {
    createInterval();
  } else {
    handleClearInterval();
  }
};
const handleNewRow = () => { // 点击新行
  newRows.value = 0
  lock.value = false
  scrollToBottom();
};
const onscroll = () => {// 监听滚动事件，滚到底时解锁
  const el = document.querySelector('#roll-box');
  if (el) {
    const bt = el.scrollTop + el.clientHeight - el.scrollHeight
    if (bt > -1 && bt < 1) {
      lock.value = false
      newRows.value = 0
    }
  }

};
// 滚动到底
const scrollToBottom = () => {// 滚动到底
  let el = document.querySelector('#roll-box');
  if (el) {
    el.scrollTop = el.scrollHeight
  }
}
// 清空定时器
const handleClearInterval = () => {
  if (Timer.value) {
    clearInterval(Timer.value)
    //clearInterval(this.interval)
    Timer.value = null
  }
};
// 创建定时器
const createInterval = () => {
  console.log(Timer.value, 11);
  if (!Timer.value) {
    Timer.value = setInterval(fetchLogsRealTime, 2000)
  }
}
//onmount
onMounted(() => {
  createInterval();
})
//onBeforeUnmount
onBeforeUnmount(() => {
  handleClearInterval();
}) 
</script>

<style lang="less" scoped>
.log-actualtime-index-container {
  height: calc(100% - 72px);
  background: #fff;
  position: relative;
  padding-top: 16px;
  overflow: hidden;

  .mergeList {
    position: fixed;
    text-align: center;
    bottom: 20px;
    width: 134px;
    height: 22px;
    background: var(--theme_button_bg_color, #1F6DED);
    border-radius: 11px;
    left: 50%;
    line-height: 22px;
    font-size: 12px;
    color: #FFF;
    cursor: pointer;
  }


  .scoll-box {
    padding-top: 40px;
  }

  .roll-box {
    overflow-y: overlay;
    height: fit-content;
    max-height: calc(100% - 56px);
    min-height: 450px;
    width: calc(100% - 48px);
    margin-left: 24px;
    border: 1px solid rgba(232, 232, 232, 1);
    overflow-y: auto;
    border-radius: 4px;
    position: relative;

    p {
      font-size: 14px;
      height: 50px;
      line-height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #666666;

      span {
        background-color: #FAFAFA;
        color: #666666;
        width: 45px;
        display: inline-block;
        text-align: center;
        border-right: 1px solid #E8E8E8;
        margin-right: 20px;
      }
    }
  }

  .roll-box:hover+.function-box {
    z-index: 1;
  }

  .function-box {
    position: absolute;
    display: flex;
    width: calc(100% - 52px);
    left: 26px;
    justify-content: center;
    height: 52px;
    background: rgba(255, 255, 255, );
    line-height: 43px;
    margin-top: 1px;
    line-height: 52px;
    z-index: 1;

    .jee-svg-icon {
      color: #666666;
      fill: #666666;
      padding-right: 8px;

      &.icon-delete {
        vertical-align: baseline;
        font-size: 14px;
      }
    }

    .jee-hover-color {
      margin-right: 30px;
      cursor: pointer;

      &:hover {
        color: var(--theme_button_hover_bg_color, #4892fa);
      }
    }

    .jee-color {
      color: var(--theme_text_hightlight_color, #1F6DED) !important;
    }
  }

  .function-box:hover {
    z-index: 1;
  }
}
</style>

